<template>
  <div class="announce-page">
    <div class="container">
      <div class="announce-header">
        <h1 class="page-title">系统公告</h1>
      </div>
      
      <!-- 公告分类标签 -->
      <div class="announce-tabs">
        <div 
          v-for="tab in tabs" 
          :key="tab.type" 
          class="tab-item" 
          :class="{ active: activeTab === tab.type }"
          @click="handleTabChange(tab.type)">
          {{ tab.name }}
        </div>
      </div>
      
      <!-- 公告列表 -->
      <div class="announce-list" v-if="filteredAnnouncements.length > 0">
        <div 
          v-for="item in filteredAnnouncements" 
          :key="item.id" 
          class="announce-item card"
          :class="{ expanded: item.expanded }">
          <div class="announce-header" @click="openAnnounce(item)">
            <div class="announce-type" :class="item.type">{{ getTypeName(item.type) }}</div>
            <h3 class="announce-title">{{ item.title }}</h3>
            <div class="announce-meta">
              <span class="publish-time">{{ item.publishTime }}</span>
              <span class="views-count">{{ item.views }}次阅读</span>
            </div>
          </div>
          
          <div class="announce-body" v-if="item.expanded">
            <div class="announce-summary">{{ item.summary }}</div>
            <div class="announce-content" v-html="item.content"></div>
          </div>
        </div>
      </div>
      
      <!-- 无内容 -->
      <div class="no-content" v-else>
        <el-empty description="暂无公告"></el-empty>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-section" v-if="filteredAnnouncements.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import request from '@/utils/request'


// 数据
const activeTab = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const announcements = ref([])

// 公告类型标签
const tabs = [
  { type: 'all', name: '全部' },
  { type: 'system', name: '系统' },
  { type: 'activity', name: '活动' },
  { type: 'maintenance', name: '维护' }
]

// 计算属性
const filteredAnnouncements = computed(() => {
  if (activeTab.value === 'all') {
    return announcements.value
  } else {
    return announcements.value.filter(item => item.type === activeTab.value)
  }
})

// 生命周期钩子
onMounted(() => {
  fetchAnnouncements()
})

// 方法
const fetchAnnouncements = async () => {
  try {
    const res = await request.get('/announcements/page', {
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        type: activeTab.value !== 'all' ? activeTab.value : ''
      }
    })
    console.log('--',res.data.code);
    
    if (res.data.code === '200') {
      announcements.value = res.data.data.records || []
      total.value = res.data.data.total || 0
      console.log('--',announcements.value);
    } else {
      console.error('获取公告失败:', res.data.msg)
      // 可以添加提示用户的代码，例如使用Element Plus的消息提示
      // ElMessage.error(res.data.msg || '获取公告失败')
    }
  } catch (error) {
    console.error('获取公告列表出错:', error)
    // ElMessage.error('获取公告列表失败，请稍后重试')
    
    // 如果需要，可以加载模拟数据来避免页面显示为空
    loadMockData()
  }
}

// 模拟数据函数，当API请求失败时可以使用
const loadMockData = () => {
  announcements.value = [
    {
      id: 1,
      type: 'system',
      title: '图文发布系统2.0版本正式上线',
      summary: '全新改版的图文发布系统正式上线，新增多项功能，优化用户体验。',
      content: `<p>尊敬的用户：</p>
                <p>我们很高兴地通知您，图文发布系统2.0版本已于今日正式上线。本次更新包含多项重要功能和性能优化：</p>
                <ul>
                  <li>全新设计的用户界面，更加直观友好</li>
                  <li>新增AI智能推荐功能，为您推荐感兴趣的内容</li>
                  <li>优化发布流程，支持更多格式的图文混排</li>
                  <li>提升系统稳定性和响应速度</li>
                </ul>
                <p>感谢您对我们的支持，我们将持续改进系统，为您提供更好的服务体验。</p>
                <p>系统管理团队</p>`,
      publishTime: '2023-11-20 10:00',
      views: 3452,
      expanded: false
    },
    {
      id: 2,
      type: 'maintenance',
      title: '系统计划维护通知',
      summary: '系统将于2023年11月25日进行例行维护，期间部分功能可能暂时无法使用。',
      content: `<p>尊敬的用户：</p>
                <p>为了提供更好的服务体验，我们计划于2023年11月25日凌晨2:00-6:00进行系统例行维护。维护期间，图文发布系统的部分功能将暂时无法使用。</p>
                <p>具体影响范围：</p>
                <ul>
                  <li>文章发布功能</li>
                  <li>用户评论功能</li>
                  <li>搜索功能</li>
                </ul>
                <p>其他功能（如浏览文章）将不受影响。维护完成后，所有功能将恢复正常。对于给您带来的不便，我们深表歉意。</p>
                <p>系统运维团队</p>`,
      publishTime: '2023-11-18 14:30',
      views: 2198,
      expanded: false
    },
    {
      id: 3,
      type: 'activity',
      title: '"创作者激励计划"正式启动',
      summary: '参与创作并发布优质内容，赢取丰厚奖励和创作资源。',
      content: `<p>亲爱的创作者：</p>
                <p>我们很高兴地宣布，"创作者激励计划"现已正式启动！无论您是资深作者还是新晋创作者，都可以通过发布优质内容获得奖励和支持。</p>
                <p>活动详情：</p>
                <ul>
                  <li>时间：即日起至2023年12月31日</li>
                  <li>规则：根据发布文章的质量、阅读量和互动情况进行评分</li>
                  <li>奖励：现金奖励、流量扶持、专属创作资源</li>
                </ul>
                <p>参与方式：</p>
                <p>在您发布文章时，勾选"参与创作者激励计划"选项即可。我们的编辑团队将定期评选优质内容，并向获选作者发放奖励。</p>
                <p>希望看到您的精彩创作！</p>
                <p>活动组委会</p>`,
      publishTime: '2023-11-15 09:15',
      views: 5784,
      expanded: false
    },
    {
      id: 4,
      type: 'system',
      title: '用户行为准则更新',
      summary: '我们更新了平台的用户行为准则，请所有用户遵守相关规定。',
      content: `<p>尊敬的用户：</p>
                <p>为维护良好的社区环境，我们更新了平台的《用户行为准则》。主要更新内容包括：</p>
                <ul>
                  <li>明确定义了不当内容的范围</li>
                  <li>细化了用户互动中的礼仪要求</li>
                  <li>完善了对违规行为的处理机制</li>
                </ul>
                <p>新版准则将从2023年12月1日起正式生效。我们鼓励所有用户熟悉并遵守这些规定，共同创建一个健康、积极的社区环境。</p>
                <p>详细内容请访问：<a href="#">《用户行为准则》</a></p>
                <p>社区管理团队</p>`,
      publishTime: '2023-11-10 16:45',
      views: 1876,
      expanded: false
    },
    {
      id: 5,
      type: 'activity',
      title: '专题征文：未来科技与生活',
      summary: '分享您对未来科技如何改变生活的见解，参与征文活动赢取奖励。',
      content: `<p>亲爱的创作者：</p>
                <p>我们诚挚邀请您参与"未来科技与生活"专题征文活动。</p>
                <p>征文主题：</p>
                <p>您可以围绕AI、机器人、新能源、太空探索等科技主题，探讨它们如何改变我们的生活方式、工作模式以及社会结构。</p>
                <p>投稿要求：</p>
                <ul>
                  <li>字数：1000-5000字</li>
                  <li>形式：观点文章、科普文章、畅想文章均可</li>
                  <li>截止日期：2023年12月15日</li>
                </ul>
                <p>优秀作品将获得专题推荐位展示，以及平台提供的创作奖励。投稿时请在标签中添加"未来科技与生活"。</p>
                <p>期待您的精彩见解！</p>
                <p>编辑部</p>`,
      publishTime: '2023-11-05 11:20',
      views: 3089,
      expanded: false
    }
  ]
  
  total.value = announcements.value.length
}

const getTypeName = (type) => {
  const tab = tabs.find(item => item.type === type)
  return tab ? tab.name : '其他'
}

const handleTabChange = (type) => {
  activeTab.value = type
  currentPage.value = 1
  fetchAnnouncements() // 切换标签时重新获取数据
}

const openAnnounce = (item) => {
  // 切换展开状态
  item.expanded = !item.expanded
  
  // 如果是展开状态，增加阅读数
  if (item.expanded) {
    item.views++
    // 可以发送请求更新后端阅读数
    updateAnnouncementViews(item.id)
  }
}

// 更新公告阅读数
const updateAnnouncementViews = async (id) => {
  try {
    await request.post(`/announcement/view/${id}`)
  } catch (error) {
    console.error('更新阅读数失败:', error)
  }
}

const handlePageChange = (page) => {
  currentPage.value = page
  fetchAnnouncements() // 切换页码时重新获取数据
  window.scrollTo(0, 0)
}
</script>

<style scoped>
.announce-page {
  padding: 20px 0 40px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.announce-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.announce-tabs {
  display: flex;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.tab-item {
  padding: 15px 30px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item:hover {
  background-color: #f5f7fa;
}

.tab-item.active {
  color: #409eff;
  background-color: #ecf5ff;
  font-weight: bold;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
}

.announce-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.announce-item {
  padding: 20px;
  transition: all 0.3s;
}

.announce-item.expanded {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.announce-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
}

.announce-type {
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 15px;
  color: #fff;
}

.announce-type.system {
  background-color: #409eff;
}

.announce-type.maintenance {
  background-color: #e6a23c;
}

.announce-type.activity {
  background-color: #67c23a;
}

.announce-title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  color: #333;
}

.announce-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.announce-meta span {
  margin-left: 15px;
}

.announce-body {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.announce-summary {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
}

.announce-content {
  color: #333;
  line-height: 1.8;
}

.announce-content p {
  margin-bottom: 15px;
}

.announce-content ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.announce-content li {
  margin-bottom: 8px;
}

.no-content {
  padding: 40px 0;
}

.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .announce-tabs {
    flex-wrap: wrap;
  }
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 15px;
  }
  
  .announce-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .announce-type {
    margin-bottom: 10px;
  }
  
  .announce-meta {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }
  
  .announce-meta span {
    margin-left: 0;
    margin-right: 15px;
  }
}
</style> 